import React, {Component} from 'react';
import {Layout, Menu, Button} from 'antd';

import Index from '../index/index';

const {Header, Footer} = Layout;
const SubMenu = Menu.SubMenu;

class Main extends Component {

  quit = () => {
    localStorage.removeItem('isLogin');
    localStorage.removeItem('user');
    window.location.href = '/';
  }

  render() {
    const username = localStorage.getItem('username')
    return (
      <div style={{background: "#f0f2f5"}}>
        <Header style={{background: '#fff'}}>
          <div className="logo"></div>
          <Menu
            mode="horizontal"
            defaultSelectedKeys={['index']}
            style={{
            lineHeight: '64px'
          }}>
            <Menu.Item key="index">首页</Menu.Item>
            <Menu.Item key="file">归档</Menu.Item>
            <Menu.Item key="about">关于我</Menu.Item>
            <SubMenu style={{float: 'right'}} title={<span>{`欢迎你，${username}`}</span>}>
              <Menu.Item key="quit" onClick={() => {this.quit()}}>注销</Menu.Item>
            </SubMenu>
          </Menu>
        </Header>
        <Index></Index>
        <Footer style={{
          textAlign: 'center'
        }}>
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </div>
    );
  }
}

export default Main;
